<template>
    <div class="content">
      <div>
        <el-select placeholder="全部" v-model="area" style="width: 200px; margin-bottom: 20px;">
          <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span style="font-weight: bold;color: white;margin-left: 20px;">风速实况（m/s）</span>
        <el-table
          :data="groupData"
          style="width: 100%"
          stripe
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :row-style="rowStyle"
        >
          <el-table-column prop="region" label="景区" fixed="left" min-width="18%"></el-table-column>
          <el-table-column prop="station" label="区域气象站" min-width="35%"></el-table-column>
          <el-table-column prop="dqfs" label="当前风速" min-width="25%"></el-table-column>
          <el-table-column prop="zdfs" label="整点风速" min-width="25%"></el-table-column>
          <el-table-column prop="zdjdfs" label="整点极大风速" min-width="25%"></el-table-column>
          <el-table-column prop="dtjdfs" label="当天极大风速" min-width="25%"></el-table-column>
          <el-table-column prop="ztjdfs" label="昨天极大风速" min-width="25%"></el-table-column>
          <el-table-column prop="dtzd" label="前天极大风速" min-width="25%"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
          style="margin-top: 20px;"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import Request from '@/api/weather/request';
  import { Message } from 'element-ui';
  
  export default {
    data() {
      return {
        area: '', 
        areaOptions: [
          { label: '全部', value: '' },
          { label: '宝兴', value: '宝兴' },
          { label: '汉源', value: '汉源' },
          { label: '九龙', value: '九龙' },
          { label: '芦山', value: '芦山' },
          { label: '冕宁', value: '冕宁' },
          { label: '名山', value: '名山' },
          { label: '石棉', value: '石棉' },
          { label: '天全', value: '天全' },
          { label: '荥经', value: '荥经' },
          { label: '雨城', value: '雨城' }
        ],
        groupData: [],
        list: [],
        currentPage: 1,
        pageSize: 13,
        total: 0,
      };
    },
    methods: {
      async fetchData(page = 1) {
        try {
          const response = await Request.get(`/weatherfacts/actualStatistics`, {
            params: {
              county: this.area, 
              pageNum: page,
              pageSize: this.pageSize,
              isTravel:true
            }
          });
  
          if (response.status === 200) {
            this.list = response.data.WindData.records;
            this.total = response.data.WindData.total;
            console.log(this.list)
            this.groupData = this.list.map(item => ({
                region:item.szx ,  //景区
                station:item.zm, //气象站
             
            }));
          } else {
            console.log('请求出错');
          }
        } catch (error) {
          console.error('请求失败', error);
        }
      },
      handlePageChange(page) {
        this.currentPage = page;
        this.fetchData(page);
      },
      headerCellStyle() {
      return {
        background: "#011A10",
        color: "#fff",
        opacity: 0.8,
      };
    },
    cellStyle() {
      return {
        background: "#00371D",
        color: "#fff",
      };
    },
    rowStyle() {
      return {
        height: "30px",
      };
    },
    },
    watch: {
      area() {
        this.currentPage = 1;
        this.fetchData();
      }
    },
    mounted() {
      this.fetchData();
    }
  };
  </script>
  
  
  <style scoped>
  .content {
    width: 100%;
  }
  </style>
  